<template>
  <div v-if="data" class="hv-border-style-input-container">
    <div>
      <a-checkbox v-model:checked="checked" @change="checkeChange" />
    </div>
    <div>
      <a-input-number
        v-model:value="data.width"
        :min="0"
        :max="99"
        :step="1"
        size="small"
        @change="widthChange"
      />
    </div>
    <div class="hv-border-style-input">
      <a-select
        v-model:value="data.style"
        :options="borderStyleListConst"
        size="small"
        placeholder="请选择样式"
        dropdownClassName="hv-dark-select-dropdown"
      />
    </div>
    <div>
      <hv-color-dropdown-picker
        v-model:color="data.color"
        size="small"
        :colorPreviewVisible="false"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, type PropType, ref, watch } from "vue";
import ColorDropdownPicker from "@/visual/components/color-picker/ColorDropdownPicker.vue";
import { borderStyleListConst } from "@/visual/commons/consts/dashboard-const";

export default defineComponent({
  name: "BorderStyleInput",
  components: {
    hvColorDropdownPicker: ColorDropdownPicker,
  },
  props: {
    value: {
      type: Object as PropType<{
        width: number;
        style: string;
        color: string;
      }>,
    },
  },
  setup(props) {
    const data = ref<any>();
    const checked = ref<Boolean>(true);

    const widthChange = () => {
      checked.value = data.value.width > 0 ? true : false;
    };

    const checkeChange = () => {
      data.value.width = checked.value ? 1 : 0;
    };

    watch(
      () => props.value,
      () => {
        data.value = props.value;
        widthChange();
      },
      { deep: true, immediate: true }
    );

    return {
      data,
      borderStyleListConst,
      checked,
      checkeChange,
      widthChange,
    };
  },
});
</script>

<style lang="less" scoped>
@import "./BorderStyleInput.less";
</style>
